<template>
  <h1>计算属性</h1>
  <hr>
  <h1>原价:{{ price }}</h1>
  <h1>会员原价:{{ vipPrice }}</h1>
  <h1>超级会员原价:{{ sVipPrice }}</h1>
  <br>
  <button @click="changePrice">修改原价</button> &emsp; 
  <button @click="changeVipPrice">修改vip的价格</button>
</template>

<script setup>
import { ref, computed } from 'vue';

const price = ref(1000)

// 最常见的计算属性
// const vipPrice = computed(()=>{
//   return price.value/2
// })
// 一般情况下最好不要这么用(用了多半是逻辑错了)
const vipPrice = computed({
  get(){
    return price.value/2
  },
  set(val){
    // 需要拿到传入的值
    // console.log("你想修改 计算属性, 修改的值",val);
    price.value = val * 2
  }
})

const sVipPrice = computed(()=>{
  return price.value*0.1
})

// 修改原价
function changePrice() {
  price.value = 800
}

// 修改 vip 价格 (计算属性的值是不能直接修改的)
function changeVipPrice() {
  vipPrice.value = 1000
}

</script>